$basecolor: #FD8A3B !default;
.white_overlay{
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.15);
}
.mask_black{
    background: rgba(0, 0, 0, 0.15) !important;
}
#widget_panel{
    overflow: hidden;
//  position: fixed;
//  width: 100px;
//  height: 100px;
}
#widget_panel>div{
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.15);
    z-index: 2000;
}
@for $i from 0 to 5 {
    #widget_l#{$i} {
        z-index: #{2020-$i};
    }
}
//#toast,
//.loaddingBox{
//  z-index: 2001;
//}
//#alert_box{
//  z-index: 2000;
//}
/*==========loading==========*/
#toast{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    #toastBox{
        position: relative;
        min-width: 70px;
        max-width: 50%;
        padding: 14px 10px;
        margin: 200px auto 0 auto;
        background: rgba(40, 40, 40, 0.75);
        text-align: center;
        border-radius: 2px;
        color: #FFFFFF;
        -webkit-animation-name:'wobble';
        -webkit-animation-duration: 2s;
        -webkit-animation-timing-function: linear; 
        -webkit-animation-delay: 0s;
        #toastText{
            position: relative;
            color: #fff;
            color: #fff;
        }
    }
}
/*==========loadding==========*/
.loaddingBox{
      position: fixed;
      width: 7em !important;
      height: 7em !important;
      top: 180px;
      left: 50%;
      margin-left: -3.5em;
      background: rgba(40, 40, 40, 0.75);
      text-align: center;
      border-radius: 5px;
      color: #FFFFFF;
      .loaddingIcon{
        position: absolute;
        width: 0px;
        left: 50%;
        top: 38%;
        .loaddingSpot{
            position: absolute;
            top: -1px;
            opacity: 0.25;
             -webkit-animation-name:'loaddingSpot';
            -webkit-animation-duration: 1.5s;
            -webkit-animation-timing-function: linear; 
            -webkit-animation-iteration-count: infinite;
            &:before{
                content: " ";
                position: absolute;
                width: 8.14px;
                height: 3.08px;
                background: #d1d1d5;
                box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 1px;
                border-radius: 1px;
                -webkit-transform-origin: left 50% 0px;
                transform-origin: left 50% 0px;
            }
            
            @for $i from 1 to 13 {
                &.loaddingSpot#{$i} {
                    -webkit-animation-delay:#{$i*0.125}s;
                    &:before{
                         -webkit-transform: rotate(#{$i*30-30}deg) translate(7.92px, 0px);
                         transform: rotate(#{$i*30-30}deg) translate(7.92px, 0px);
                    }
                }
            }
        }
     }
     #loaddingText{
        margin-top: 5em;
        font-size: 14px;
        color: #fff;
    }
}

@-webkit-keyframes 'loaddingSpot' {
    0% {
        opacity: 0.8;
    }
    10% {
        left: 0.3;
    }
    20% {
        left: 0.8;
    }
    100%{
        left: 0.8;
    }
}

/*====loddingBar=====*/
.loaddingBar{
    line-height: 40px;
    @for $i from 1 to 4 {
        .loaddingPotin#{$i}{
            -webkit-animation-name:'loaddingBar';
            -webkit-animation-duration: 1.8s;
            -webkit-animation-timing-function: linear; 
            -webkit-animation-delay: #{$i*0.3}s;
            -webkit-animation-iteration-count: infinite;
        }
    }
}
@-webkit-keyframes 'loaddingBar'{
    0%   {opacity: 0;}
    50% {opacity: 1;}
}

/* === alert[B] === */
#alert_box{
    background-color: #fff;
    min-width:70%;
    max-width: 90%;
    min-height: 160px;
    margin: 140px auto 0px;
    border-radius: 4px;
    overflow: hidden;
    .alert_logo{
        width: 108px;
        height: 108px;
        border-radius: 4px;
        margin: 28px auto 0px auto;
        background-size: cover;
    }
    .alert_title{
        margin: 20px 10px 0px 10px;
        text-align: center;
        color:#000;
        line-height: 25px;
        height: 25px;
        font-size: 18px;
    }
    .alert_content{
        margin: 20px 25px;
        text-align: center;
        padding: 4px;
        min-height:30px;
        color:#666;
        line-height: 25px;
        overflow: hidden;
        font-size: 15px;
    }
    #alert_btn{
        margin: 15px;
        height: 40px;
        line-height: 40px;
        box-sizing: border-box;
        text-align: center;
        background-color: #06C77C;
        color:#fff;
        border-radius: 4px;
    }
}


/* === alert[E] === */
/* === confirm[B] === */
#confirm_box,.confirm_box{
    background-color: #fff;
    width:80%;
    margin: 150px auto 0px;
    border-radius: 10px;
    overflow: hidden;
    text-align: center;
    .confirm_title{
        text-align: center;
        color: #222;
        width: 100%;
        line-height: 40px;
        font-size: 14px;
        height: 40px;
    }
    .confirm_content{
        text-align: center;
        padding: 0px 12px 12px 12px;
        min-height:40px;
        border-bottom: 1px solid #ddd;
        font-size: 15px;
        color:#222;
        line-height: 25px;
        overflow: hidden;
    }
    #confirm_cancel,#confirm_confirm{
        height: 40px;
        line-height: 40px;
        box-sizing: border-box;
        float: left;
        width:50%;
        background: #fdfdfd;
        text-align: center;
    }
    #confirm_cancel{
        color:#222222;
        border-right: 1px solid #e5e5e5;
    }
    #confirm_confirm{
        color:$basecolor
    }
}
/* === confirm[E] === */
.widget_actionSheetBox{
  position: fixed;
  left: 0;
  bottom: 0;
  -webkit-transform: translate(0, 100%);
          transform: translate(0, 100%);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  z-index: 1002;
  width: 100%;
  background-color: #EFEFF4;
  -webkit-transition: -webkit-transform .3s;
  transition: -webkit-transform .3s;
  transition: transform .3s;
  transition: transform .3s, -webkit-transform .3s;
}
.actionSheet_toggle {
  -webkit-transform: translate(0, 0) !important;
          transform: translate(0, 0) !important;;
}
#widget_actionSheetCancel{
    width: 100%;
    line-height:40px;
    background: white;
    font-size: 16px;
    color: black;
    text-align: center;
}
/* === actionSheet[E] ==== */

#widget_opPannel{
    position: fixed;
    overflow: hidden;
    width: 100%;
    left: 0;
    bottom: 125px;
    min-height: 220px;
    box-sizing: border-box;
    -webkit-transform: translate(0, 200%);
            transform: translate(0, 200%);
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    z-index: 1000;
    -webkit-transition: -webkit-transform .3s;
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s;
}
/* ======dialog=======*/
.dialog_box{
    margin: 100px auto 0px;
    width:70%;
    background-color: #fff;
    border-radius: 2px;
    overflow: hidden;
}
.dialog_textBox{
    padding: 15px 12px 10px 12px;
}
.dialog_textBox>textarea{
    box-sizing: border-box;
    width: 100%;
    font-family: Helvetica,"microsoft yahei";
    border: none;
    outline: none;
    resize: none;
    font-size: 14px;
}
.dialog_promptNum{
    box-sizing: border-box;
    width: 100%;
    text-align: right;
    color:#777777;
}
#dialog_cancel,#dialog_confirm{
    height: 40px;
    line-height: 40px;
    box-sizing: border-box;
    border-top:1px solid #e0e0e0;
    float: left;
    width:50%;
    text-align: center;
}
#dialog_confirm{
    border-left:1px solid #06c77c;
    color:#06c77c;
}
 
/* ======dialog=======*/
/*=======Function List Begin========*/ 
#functions_box{
    width: 100%;
    border-top: 1px solid #e5e5e5;
    overflow: scroll;
    position: absolute;
    left: 0px;
    bottom: 0px;
    max-height: 100%;
    background-color: #f5f5f5;
}
.functions_title{
    width: 100%;
    line-height: 40px;
    text-align: center;
    border-bottom: 1px solid #e5e5e5;
    font-size: 12px;
    color: #999;
}
.functions_item{
    width: 100%;
    line-height: 48px;
    border-bottom: 1px solid #e5e5e5;
    font-size: 15px;
    text-align: center;
    background-color: #fff;
}
.functions_item .item_chosed {
    border: 2px solid #06c77c;
}
.functions_cancel{
    border-bottom: none;
    border-top: 1px solid #e5e5e5;
}
/*=======Function List End========*/ 
/* ======share=======*/

#widget_Share_Image{
    width: 80%;
    margin: 50px 10% 0 10%;
}
.widget_Share_Btn{
    text-align: center;
}
.widget_Share_Btn>span{
    display: inline-block;
    margin-top: 20px;
    font-size: 16px;
    padding: 8px 35px;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 2px;
    font-weight: 100;
}
#widget_Share_Outer{
    width: 100%;
    height: 100%;
    display: table;
    box-sizing: border-box;
    .widget_share_inner{
        width: 100%;
        display: table-cell;
        vertical-align:middle; 
        box-sizing: border-box;
        text-align: center;
        .widget_share_area{
            display: inline-block;
            width: 80%;
            background-color: #fff;
            box-sizing: border-box;
            border-radius: 2px;
            position: relative;
            padding-top: 133px;
            .widget_share_img{
                width: 206px;
                height: 202px;
                position: absolute;
                top: 0;
                margin-top: -69px;
                left: 50%;
                margin-left: -101px;
                background-size: cover;
                background-position: center center;
                background-image: url(http://image.birdiefun.com/birdie/images/sharetip.png);
            }
            .widget_share_icon{
                display: inline-block;
                width: 27px;
                height: 15px;
                background-image: url(../images/share_top_icon.jpg);
                background-size: cover;
                position: relative;
                top: 2px;
                margin: 0 5px 0 3px;
            }
            .widget_share_btn{
                box-sizing: border-box;
                height: 45px;
                line-height: 45px;
                border-top: 1px solid #e5e5e5;
                text-align: center;
                font-size: 16px;
                position: relative;
                .widget_share_input_area{
                    position: absolute;
                    top: 2px;
                    left: 50%;
                    margin-left: 30px;
                }
                .widget_share_input{
                    width: 100px;
                    position: absolute;
                    left: 0;
                    top: 0;
                    background-color: #06c77c;
                    opacity: 0;
                }
            }
        }
        .widget_share_area_QRcode{
            display: inline-block;
            width: 80%;
            background-color: #fff;
            box-sizing: border-box;
            border-top-left-radius: 2px;
            border-top-right-radius: 2px;
            position: relative;
            padding: 25px 44px 10px;
            .widget_share_name{
                
            }
            .widget_share_QRcode{
                width: 90%;
                margin: 5px auto;
                background-size: cover;
                background-position: center center;
                background-repeat: no-repeat;
            }
            .widget_share_text{
                font-size: 14px;
                color: #bfbebe;
            }
        }
        .widget_share_refresh{
            width: 80%;
            font-size: 14px;
            color: #bfbebe;
            height: 35px;
            line-height: 35px;
            background-color: #f5f5f5;
            margin-left: 10%;
            border-bottom-left-radius: 2px;
            border-bottom-right-radius: 2px;
            span{
                display: inline-block;
                width: 14px;
                height: 14px;
                background-size: cover;
                background-image: url(../images/refresh.png);
                margin-right: 5px;
                position: relative;
                top: 2px;
            }
        }
    }
}
.backgray{
    background-color: #f5f5f5 !important;
}
/* ======share=======*/


/* ======login======= */
.loginModel{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.15);
    z-index: 1000000;
}
.loginBox{
    position: absolute;
    width: 90%;
    top: 150px;
    left: 5%;
    background: #fff;
    text-align: center;
    border-radius: 2px;
    box-sizing: border-box;
}
.modelTitle{
    margin: 30px 0px 15px;
    color: #222;
    padding: 0px 12px;
    clear: both;
    word-break: break-all;
}

.modelInputs{
    box-sizing: border-box;
    width: 100%;
    padding: 0px 12px;
    margin-bottom: 15px;
}
.inputBox{
    box-sizing: border-box;
    width: 100%;
    padding-left: 10px;
    background-color: #f5f5f5;
    overflow: hidden;
    border: 1px solid #e5e5e5;
}
#username{
    width: 100%;
    background-image: url(http://image.birdiefun.com/birdie/images/userBtn.png);
    background-size: 10%;
}
#validCode{
    width: 60%;
    background-image: url(http://image.birdiefun.com/birdie/images/validCodeIcon.png);
    background-size: 17%;
}
.loginInput{
    text-align: left !important;
    font-size: 16px;
    padding-left: 44px;
    font-family: Helvetica,"microsoft yahei";
    float: left;
    height: 44px;
    border: none;
    outline: none;
    box-sizing: border-box;
    background-color: #f5f5f5;
    overflow: hidden;
    border-bottom: 1px solid #e5e5e5;
    background-repeat: no-repeat;
    background-position: 7px center;
}
.enableCode,.unableCode{
    float: left;
    box-sizing: border-box;
    width: 40%;
    height: 44px;
    line-height: 44px;
    text-align: center;
    font-size: 14px;
    font-family: Helvetica,"microsoft yahei";
}
.enableCode{
    background-color: #f3727d;
    color: #fff;
}
.unableCode{
    background-color: #CCCCCC;
    color: #fff;
}
.loginForWX{
    box-sizing: border-box;
    width: 100%;
    text-align: center;
    padding: 0px 12px;
    margin-bottom: 25px;
}
.loginForWXBtn{
    line-height: 44px;
    border: 1px solid #02b300;
    color: #02b300;
    background-color: #f2fbf2;
}
.loginForWXIcon{
    max-height: 14px;
    margin-right: 5px;
    position: relative;
    top: 3px;
}
.fw_imagesBox{
    box-sizing: border-box;
    float: left;
    width: 100%;
    overflow: hidden;
}
.fw_imgShowBox>div{
    box-sizing: border-box;
    position:relative;
    float: left;
    background-clip: padding-box;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 2px;
    border:1px solid #f5f5f5;
}
.fw_w4{
    width: 23%;
    padding-bottom: 23%;
    margin: 2% 2% 0 0;
}
.fw_w3{
    width: 31%;
    padding-bottom: 31%;
    margin: 2% 2% 0 0;
}
.fw_w2{
    width: 48%;
    padding-bottom: 48%;
    margin: 2% 2% 0 0;
}
.fw_w1{
    width: 92%;
    padding-bottom: 92%;
    margin: 8% 8% 0 0;
}
.imageBoxDeleteIcon{
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-clip: padding-box;
    position: absolute;
    width: 27px;
    height: 27px;
    top: 0px;
    right: 0px;
    background-image: url(../images/feed_img_delete.png);
}
.imagedefaltone{
    position: absolute;
    width: 100%;
    bottom: 0px;
    padding: 4px 0;
    color: white;
    text-align: center;
    background-color: rgba(0,0,0,0.15);
}
.unUploadImg{
    filter: alpha(opacity=60);
    opacity: 0.6;
}
.unUpload{
    color: #ff0000;
    text-align: center;
    top: 40%;
    width: 100%;
    position: absolute;
}
.fw_addNewImage{
    box-sizing: border-box;
    float: left;
    background-clip: padding-box;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url(http://image.birdiefun.com/birdie/images/btnAddPic.png);
}
.fixBar{
    position: fixed;
    top: 0;
}
#foot_bar{
    box-sizing: border-box;
    width:100%;
    height: 50px;
    background-color: rgba(255,255,255,0.98);
    position: fixed;
    bottom: 0px;
    color:#222;
    border-top: 1px solid #eee !important;
    -webkit-transition: -webkit-transform .3s;
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s;
    z-index: 10;
    -webkit-transform: translate(0, 100%);
            transform: translate(0, 100%);
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
}
#foot_bar>span{
    float: left;
    height:50px;
    text-align: center;
    font-size: 12px;
    color: #666;
}
.foot_bar_1>span{width:100%;}
.foot_bar_2>span{width:50%;}
.foot_bar_3>span{width:33%;}
.foot_bar_4>span{width:25%;}
.foot_bar_5>span{width:20%;}
#foot_bar>span>img{
    max-width: 20px;
    /*height:20px;*/
    margin-top: 5px;
}
#foot_bar>span.checkedbar{
    color:#06c77c;
}
.foot_bar_show {
  -webkit-transform: translate(0, 0) !important;
          transform: translate(0, 0) !important;;
}
.foot_bar_backitem{
    position: fixed;
    right: 15px;
    bottom: 69px;
    width: 40px;
    z-index: 800;
    height:40px;
    background-image: url(http://image.birdiefun.com/birdie/images/icon_back.png);
    background-size: 100%;
}

.small_noinfo.fullpage{
    box-sizing: border-box;
    height: 100%;
    padding-top: 200px;
}
.small_noinfo {
    padding-top: 150px;
    background: #fff;
    text-align: center;
    font-size: 14px;
    padding-bottom: 150px;
}
.small_noinfo img {
    width: 40px;
    height: 55px;
}
.small_noinfo p {
    color: #999;
    line-height: 15px;
    margin-top: 15px;
    margin-bottom: 5px;
}
.small_noinfo a {
    color: #06c77c;
}
.fullpage{
    position: fixed;
    width: 100%;
    height: 100%;
}
/******empty page*******/

/*************simple feedback*************/
.simple_comment_box{
    margin: 0px;
    padding: 0px;
    width:100%;
    height:44px;
    position: fixed;
    bottom: 0px;
    background-color: #f4f4f4;
    line-height: 44px;
    z-index: 100;
}
.simple_comment_box>input{
    background-color: #e5e5e5;
    border:none;
    width:65%;
    height:33px;
    margin-left: 5%;
    font-size: 14px;
}
.simple_comment_box>span{
    display: inline-block;
    width:20%;
    margin-left: 2%;
    height:33px;
    line-height: 33px;
    text-align: center;
    color:#fff;
    background-color: #06c77c;
    border-radius: 2px;
}
.simple_comment{
    padding: 0px;
    position:fixed;
    top:0px;
    width:100%;
    background-color: transparent;
    border-bottom: none;
    z-index: 500;
}

/*************simple feedback*************/

/*************empty page*************/
.empty_page_outer,.empty_page_static_outer{
    display: table;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    background-color: #fff;
    z-index: 10000;
}
.empty_page_static_outer{
    z-index: 0 !important;
}
.empty_page_inner,.empty_page_static_inner{
    vertical-align:middle; 
    display:table-cell; 
    text-align:center; 
    box-sizing: border-box;
    padding: 0 20px;
}
.empty_page_content,.empty_page_static_content{
    box-sizing: border-box;
    width: 100%;
    display:inline-block;
}
.empty_page_image{
    width: 120px;
    height: 75px;
    background-size: cover;
    background-image: url(../images/empty_page_image.gif);
    margin: 0 auto;
}
.empty_page_static_image{
    width: 75px;
    height: 75px;
    background-size: cover;
    background-image: url(../images/empty_page_iamge_01.png);
    margin: 0 auto;
}
.empty_page_text,.empty_page_static_text{
    font-size: 12px;
    color: #222;
    margin-bottom: 100px;
}

.push_text_outer{
    width: 100%;
    background-color: #fff;
    box-sizing: border-box;
    padding: 50px 36px 30px;
    position: relative;
}
.push_input_outer,.push_textarea_outer{
    box-sizing: border-box;
    width: 100%;
    height: 45px;
    position: relative;
}
.push_textarea_outer{
    height: 70px;
}
.push_input,.push_textarea{
    width: 100%;
    box-sizing: border-box;
    outline: none;
    border: 1px solid #f3f3f5;
    background-color: #f8f8f8;
    height: 45px;
    padding-left: 10px;
    padding-right: 45px;
}
.push_textarea{
    resize: none;
    padding-top: 15px;
    padding-bottom: 15px;
    height: 70px;
}
.push_confrim{
    width: 100%;
    height: 44px;
    line-height: 44px;
    text-align: center;
    margin-top: 25px;
    border-radius: 2px;
    font-size: 16px;
    color: #fff;
    background-color: #06c77c;
}
.push_confrim_unclick{
    color: #999;
    background-color: #e5e5e5;
}

.push_cancle{
    position: absolute;
    right: 0;
    top: 0;
    width: 44px;
    height: 50px;
}
.push_cancle:before,.push_cancle:after{
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%) rotate(45deg);
    box-shadow: inset 0 0 0 16px #d0d0d0;
}
.push_cancle:before{
    width: 16px;
    height: 1px;
}
.push_cancle:after{
    width: 1px;
    height: 16px;
}
.push_input_del{
    position: absolute;
    right: 12px;
    bottom: 50%;
    width: 18px;
    height: 18px;
    background-color: #cbcbcb;
    margin-bottom: -9px;
    border-radius: 18px;
}
.push_input_del:before,.push_input_del:after{
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%) rotate(45deg);
    box-shadow: inset 0 0 0 12px #fff;
}
.push_input_del:before{
    width: 10px;
    height: 2px;
}
.push_input_del:after{
    width: 2px;
    height: 10px;
}
.push_num_title{
    width: 100%;
    font-size: 18px;
    text-align: center;
}
.push_num_desc{
    color: #999;
    text-align: center;
    margin-top: 5px;
}
.push_num_input{
    height: 45px;
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
}
.push_num_shows{
    overflow: hidden;
    text-align: center;
    margin-top: 25px;
}
.push_num_show{
    display: inline-block;
    width: 34px;
    height: 34px;
    border-radius: 4px;
    border: 1px solid #e5e5e5;
    box-sizing: border-box;
    margin: 0 2px;
    text-align: center;
    line-height: 34px;
}
.push_num_show_idx{
    border: 1px solid #2eaced;
}
/*VIP*/
#nmpanel{
    width:100%;
    height:100%;
    display: table;
    .nmpanelBox{
        background-color: #fff;
        display: table-cell;
        vertical-align: middle;
        position: relative;
        box-sizing: border-box;
        .nmpaneImg{
            width:50%;
            padding-top:40%;
            background:url(../images/novipbg.png) no-repeat;
            background-size: cover;
            margin:0 auto;
        }
        .nmpaneTxt{
            font-size: 14px;
            padding: 30px;
            text-align: center;
            color: #888;
        }
        .nmpaneBtn{
            width: 85px;
            background-color: #06c77c;
            color: #fff;
            height: 25px;
            font-size: 14px;
            text-align: center;
            line-height: 24px;
            border-radius: 3px;
            margin: 0 auto;
        }
        .nmpaneRead{
            position: absolute;
            bottom: 30px;
            width: 100%;
            text-align: center;
            font-size: 14px;
            color: #888;
        }
    }
}
